﻿@{
    Layout = null;
}
@using EmoneyWeiXinEntity;
@using EmoneyWeiXinCommon;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <link type="text/css" href="@Url.Content("~/css/basic.css")" rel="stylesheet"/>
    <script src="@Url.Content("~/js/jquery.js")"></script>
    <script src="@Url.Content("~/js/createjs.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/jweixin-1.0.0.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/WeiXinCommon.js")?@(new Random().Next(1, 1000))"></script>
    <title>奔跑吧股民</title>
    <style type="text/css">
        *, html, body {
            margin: 0px;
            padding: 0px;
        }

        #canvas {
            background-color: white;
        }

        .img_green {
            background: rgba(0, 0, 0, 0) url('@Url.Content("~/images/xiaolian2.png")') no-repeat scroll center center / 100% 100%;
        }

        .img_gray {
            background: rgba(0, 0, 0, 0) url('@Url.Content("~/images/xiaolian3.png")') no-repeat scroll center center / 100% 100%;
        }

        .img_red {
            background: rgba(0, 0, 0, 0) url('@Url.Content("~/images/xiaolian1.png")') no-repeat scroll center center / 100% 100%;
        }
    </style>

</head>
<body onresize="rize()" onload="rize()">
    <div id="mainDiv"></div>
    <div class="game_time">
        <h3><span id="spReTime">游戏准备中</span></h3>
        <p class="game_box_font">涨停数：<b id="bFenshu">0</b></p>
    </div>
    <div class="game_box">
        <div class="ready" id="ready1">
            <h4>计时开始</h4>
            <p class="ready_font">30:00</p>
            <p class="ready_font02"><a href="#" class="ready_font02_a  startTest">试玩一下</a><a href="#" class="start">直接开始</a></p>
            <span class="ready_close"></span>
        </div>
        <div class="ready over" style="display: none" id="ready2">
            <h4 id="gameResult">游戏结束</h4>
            <p class="ready_font" id="fenshuResult">30:00</p>
            <p class="ready_font02"><a href="#" class="ready_font02_a startTest">再试玩一下</a><a href="#" class="start">可以开始了</a></p>
            <span class="ready_close"></span>
        </div>

    </div>

    <script type="text/javascript">
        document.ontouchmove = function (e) { e.preventDefault(); };//手机上禁止拖动
        (function ($) {

            var imgsFest = [
                { src: "@Url.Content("~/images/xiaolian1.png")", id: "img1" },
                { src: "@Url.Content("~/images/xiaolian2.png")", id: "img2" },
                { src: "@Url.Content("~/images/xiaolian3.png")", id: "img3" }
            ];
            var loader = new createjs.LoadQueue(false);

            var openId = '@ViewBag.openId';
            var weixinId = '@ViewBag.weixinId';
            var gzH, gzW;
            var MPGS = 4;//每一横排的个数
            var MSGS = 4;//每一竖排的个数
            var GzObjs = [];//保存所有的格子状态
            var GameStatus = false;
            var Fenshu = 0;
            var newPs = 0;//表示新产生的排数
            var currPs = 4;//表示当前点击的排数
            var CWCS = 0;//点错的次数
            var timeCount = 30;
            var isTest = true; //是否是试玩
            var mainDiv = document.getElementById("mainDiv");
            var body = document.getElementById('mainDiv') || document.body;
            var transform = typeof (body.style.webkitTransform) != 'undefined' ? 'webkitTransform' : (typeof (body.style.msTransform) != 'undefined' ? 'msTransform' : 'transform');
            var GZObj = function (isBlack, location, size, ps, clicked, div) {
                this.isBlack = isBlack;
                this.location = location;
                this.size = size;
                this.ps = ps;//表示第几横排
                this.clicked = clicked;
                this.div = div;
            };
            $(function () {
                loader.addEventListener('complete', function () {
                    $("#spReTime").text("30:00");
                    calSize();
                    initGZObjs();
                    draw();
                    showReady1();
                    initEvent();
                });
                loader.loadManifest(imgsFest);
            });

            function initGZObjs() {  //初始化格子的数据
                GzObjs.length = 0;
                var $div = $("<div style='position:absolute;z-index:1;height:" + gzH + "px;width:" + gzW + "px'></div>");
                $(mainDiv).html("");
                for (var i = 0; i < MSGS + 1; i++) {
                    var num = getRandomInt(4);
                    for (var j = 0; j < MPGS; j++) {
                        var newDiv = $div.clone();
                        if (i == MSGS) {
                            var obj = new GZObj(false, { x: j * gzW, y: (i - 1) * gzH }, { w: gzW, h: gzH }, i, false, newDiv);
                        } else {
                            var obj = new GZObj(num == j, { x: j * gzW, y: (i - 1) * gzH }, { w: gzW, h: gzH }, i, false, newDiv);
                        }
                        GzObjs.push(obj);
                        $(mainDiv).append(newDiv);
                    }
                }

            }

            function move() {
                var randNumber = getRandomInt(4);    //重新定义黑白
                newPs--;
                for (var i = 0; i < GzObjs.length; i++) {
                    var thisObj = GzObjs[i];
                    thisObj.location.y += (gzH);
                    if (thisObj.location.y >= document.documentElement.clientHeight) {
                        //表示这一排滚动到最后了
                        thisObj.location.y = -gzH;  //然后移动到最上
                        thisObj.clicked = false;
                        thisObj.ps = newPs;
                        thisObj.isBlack = (randNumber == i % 4);
                        //tempArry.push(thisObj);

                    }
                    drawDiv(thisObj.isBlack, thisObj.location.x, thisObj.location.y, thisObj.div, thisObj.clicked);
                }

            }

            function calSize()  //计算尺寸
            {
                gzH = (document.documentElement.clientHeight) / 4;
                gzW = (document.documentElement.clientWidth) / 4;
            }

            function draw() {
                for (var i = 0; i < GzObjs.length; i++) {
                    var thisObj = GzObjs[i];
                    drawDiv(thisObj.isBlack, thisObj.location.x, thisObj.location.y, thisObj.div, thisObj.clicked);
                }
            }

            function drawDiv(isblack, x, y, div, isclick) {
                div[0].style[transform] = 'translate3D(' + x + 'px,' + y + 'px,0)';
                if (isclick) {
                    div.removeClass('img_red').addClass('img_gray');
                } else
                    if (isblack) {
                        div.removeClass('img_green').removeClass('img_gray').addClass('img_red');
                    } else {
                        div.removeClass('img_gray').removeClass('img_red').addClass('img_green');
                    }
            }


            //生成一个随机数
            function getRandomInt(maxNum) {
                var i = Math.floor(Math.random() * maxNum);
                return i;
            }

            //找到被点击的格子
            function findClickGz(x, y) {
                for (var i = 0; i < GzObjs.length; i++) {
                    var thisObj = GzObjs[i];
                    if (x > thisObj.location.x && (x < thisObj.location.x + gzW) && y > thisObj.location.y && (y < thisObj.location.y + gzH)) {
                        return thisObj;
                        break;
                    }
                }
            }

            //游戏结束
            function gameOver() {
                clearInterval(interval);
                GameStatus = false;
                $("#fenshuResult").val(Fenshu);
                if (isTest) {
                    showReady2();
                } else {
                    var url = '@Url.Action("ReceiptScore", "BieCaiBaiKuai")';
                    $.ajax({
                        url: url,
                        type: 'POST',
                        async: false,
                        data: { openId: openId, fenshu: Fenshu },
                        success: function (data) {
                            if (data.toString() != "") {
                                alert(data.toString());
                                showReady2();
                            } else {
                                window.location.href = "@Url.Action("AccountPage", "BieCaiBaiKuai")?openId=" + openId;
                            }
                        }

                    });

                }
            }

            var interval;
            //开始倒计时
            function startdaojishi() {
                interval = setInterval(daojishi, 10);
            }
            var hm = 100;
            function daojishi() {
                if (hm == 100) {
                    timeCount--;
                }
                hm--;
                $("#spReTime").text(timeCount + ":" + hm);
                if (timeCount <= 0 && hm == 0) {
                    clearInterval(interval);
                    alert('倒计时结束');
                    gameOver();
                }
                if (hm == 0) {
                    hm = 100;
                }
            }

            function showReady1() {
                $(".game_box #ready2").fadeOut(500);
                $(".game_box,.game_box #ready1").hide(1).delay(1000).show(1);
            }

            function showReady2() {
                $(".game_box #ready1").fadeOut(500);
                $(".game_box,.game_box #ready2").hide(1).delay(1000).show(1);
            }
            //初始化事件
            function initEvent() {
                $(".startTest,.ready_close").click(function () {  //试玩
                    $(".game_box,.game_box #ready1").fadeOut(500);
                    restart();
                    GameStatus = true;
                    isTest = true;
                });

                $(".start").click(function () {  //开始
                    $(".game_box,.game_box #ready1").fadeOut(500);
                    restart();
                    GameStatus = true;
                    isTest = false;
                });

                if (mainDiv.ontouchstart === null) {
                    mainDiv.ontouchstart = gameTapEvent;
                } else {
                    mainDiv.onmousedown = gameTapEvent;

                }

            }

            function gameTapEvent(e) {
                if (GameStatus) {
                    var y = e.clientY || e.targetTouches[0].clientY,
                x = (e.clientX || e.targetTouches[0].clientX);
                    var clickObj = findClickGz(x, y);
                    if (!clickObj.isBlack) { //如果点的不是红色 的
                        CWCS++;
                        if (CWCS == 3) {
                            alert('你已经三次踩到跌停');
                            gameOver();
                        }
                    } else {

                        if (currPs - clickObj.ps == 1 && clickObj.clicked == false) {

                            clickObj.clicked = true;
                            currPs = clickObj.ps;
                            if (Fenshu == 0) {
                                startdaojishi();
                            }
                            Fenshu++;
                            move();
                            $("#bFenshu").text(Fenshu);
                        }
                    }
                }
            }

            function restart() {
                Fenshu = 0;
                $("#bFenshu").text(0);
                timeCount = 30;
                $("#spReTime").text("30:00");
                CWCS = 0;
                newPs = 0;//表示新产生的排数
                currPs = 4;//表示当前点击的排数
                initGZObjs();
                draw();
            }


        })(jQuery);
    </script>

    <script type="text/javascript">
        function rize() {
            var height = document.documentElement.clientHeight;
            $(".game_box").css({ "height": height });

        };
    </script>
    @{
        weixinUserEntity wxInfo = ViewBag.wxInfo as weixinUserEntity; 
    }
    @*  关于微信分享部分的代码*@
   @* <script type="text/javascript">
        var AppId = "@wxInfo.AppId";
        var AppSercret = "@wxInfo.AppSecret";
        var goUrl = "@Config.Host_Url3" + "BieCaiBaiKuai/Index";
        var shareUrl = "@Config.ShareJQUrl";
        var weixinId = "@wxInfo.id";
        var timestamp = "@ViewBag.timestamp";
        var imgUrl = "@Config.Host_Url3" + "images/share2.png";
        var tTitle = "@System.Configuration.ConfigurationManager.AppSettings["shareTitle2"]";
        var tContent = "@System.Configuration.ConfigurationManager.AppSettings["shareContent2"]";
        var nonceStr = "@ViewBag.nonceStr";
        var signature = "@ViewBag.signature";

        $(function () {
            initSharePara();
        });
        ///初始化分享到朋友圈的功能
        function initSharePara() {
            goUrl = goUrl + "?weixinId=" + weixinId + "&fromOpenId=" + '@ViewBag.openId';
            goUrl = encodeURIComponent(goUrl);
            shareUrl = shareUrl + "?goUrl=" + goUrl + "&weixinId=" + weixinId
            mysharetime(shareUrl, imgUrl, tTitle, tContent, AppId, timestamp, nonceStr, signature, function () {

            });
        }


    </script>*@


</body>
</html>
